


// 柱状图1模块
// 基于准备好的dom，初始化echarts实例

(function(){
  var myChart = echarts.init(document.getElementById('yujing'));

// 指定图表的配置项和数据
  let colorStopsArray = [
    [{
      offset: 0,
      color: 'rgba(136,255,23,0.8)', //  0%  处的颜色
    },
      {
        offset: 1,
        color: 'rgba(141,239,24,0.8)', //  100%  处的颜色
      },
    ],
    [{
      offset: 0,
      color: 'rgba(41,249,72,0.8)', //  0%  处的颜色
    },
      {
        offset: 1,
        color: 'rgba(29,245,67,0.8)', //  100%  处的颜色
      },
    ],
    [{
      offset: 0,
      color: 'rgba(56,234,209,0.8)', //  0%  处的颜色
    },
      {
        offset: 1,
        color: 'rgba(63,166,203,0.8)', //  100%  处的颜色
      },
    ],
    [{
      offset: 0,
      color: 'rgba(50,79,213,0.8)', //  0%  处的颜色
    },
      {
        offset: 1,
        color: 'rgba(44,23,245,0.8)', //  100%  处的颜色
      },
    ],
    [{
      offset: 0,
      color: 'rgba(255,76,192,0.8)', //  0%  处的颜色
    },
      {
        offset: 1,
        color: 'rgba(248,37,47,0.8)', //  100%  处的颜色
      },
    ],

  ];
  //生成随机数函数
  function getRandom(start, end, fixed=0) {
    let differ = end - start
    let random = Math.random()
    return (start + differ * random).toFixed(fixed)
  }
  let riskName = ['无风险', '低风险', '中级风险', '中高级风险', '高级风险'];
  let riskData = [getRandom(70,80), getRandom(100,110), getRandom(485,500), getRandom(50,60), getRandom(28,30)];

  option = {
    title: {
      //text: '个数(个)',
      x: '2%',
      y: '2%',
      textStyle: {
        color: '#2f89cf',
        fontSize: 14,
        fontWeight: 400,
      },
    },
    //color: ["#2f89cf"],
    //backgroundColor: '#fff',
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      extraCssText: 'width:100px;height:60px;'
    },
    xAxis: {
      data: riskName,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(45, 140, 240, 0.65)',
          width: 1, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        show: true,
        interval: 0, //代表显示所有x轴标签显示
        rotate: 0, //代表逆时针旋转45度
        margin: 8,
        textStyle: {
          color: '#1890FF',
          fontSize: 14,
          fontWeight: 400,
        },
      },
    },
    yAxis: [{
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(24,144,255, 0.15)',
          width: 1, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        inside: true,
        textStyle: {
          color: '#1890FF',
          fontWeight: 400,
          fontSize: 14,
        },
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: 'rgba(255,255,255,.5)',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(24,144,255, 0.15)',
          width: 1,
          type: 'solid',
        },
      },
    },],
    series: [{
      name: '个数',
      type: 'pictorialBar',
      barCategoryGap: '-50%',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      label: {
        show: false,
        position: 'top',
        distance: 15,
        color: '#1890FF',
        fontWeight: 'bolder',
        fontSize: 14,
      },
      itemStyle: {
        normal: {
          color: function (data) {
            var obj = {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                colorStopsArray[data.dataIndex][0],
                colorStopsArray[data.dataIndex][1],
              ],
              global: false, //  缺省为  false
            }

            return obj
          },
        },
        emphasis: {
          opacity: 1,
        },
      },
      data: riskData,
      z: 10,
    },],
  };


// 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
//alert("hahahahaah")
/**(function () {

  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: arr,
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };


  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

  // 数据变化
  var dataAll = [
    { year: "2019", data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100]},
    { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  ];

  document.querySelector(".bar h2").addEventListener("click", function (e) {
    var i = e.target == this.children[0] ? 0 : 1;
    option.series[0].data = dataAll[i].data;
    myChart.setOption(option);
  });
})();
*/
// 折线图定制
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  // (1)准备数据
  var data = {
    year: [
      [getRandom(2.8,3.0),getRandom(3.0,3.5),getRandom(7.8,8.5),getRandom(11,13),getRandom(0.00,0.05),getRandom(0.0,0.5),getRandom(0,0.5),getRandom(0,0.5),getRandom(0,0.5)],
      [2.9,3.1,8.1,12,0.01,0.05,0.1,0.3,0.5]
    ]
  };

  // 2. 指定配置和数据
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis"
    },
    legend: {
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
        color: "#4c9bfd"
      }
      // 如果series 里面设置了name，此时图例组件的data可以省略
      // data: ["邮件营销", "联盟广告"]
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "Protein",
        "Solid_Milk",
        "Fat",
        "Acidity",
        "Arsenic",
        "Aflatoxir",
        "Chromium",
        "Lead",
        "Mercury",
      ],
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#4c9bfd"
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "#012f4a"
        }
      }
    },
    series: [
      {
        name: "新增项目",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        data: data.year[0]
      },
      {
        name: "新增技能",
        type: "line",
        stack: "总量",
        smooth: true,
        data: data.year[1]
      },
      /**{
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: data.year[1],
        itemStyle: {
          barBorderRadius: 5
        }
      }
       */
    ]
  };
  //生成随机数函数
  function getRandom(start, end, fixed=0) {
    let differ = end - start
    let random = Math.random()
    return (start + differ * random).toFixed(fixed)
  }
  // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 重新把配置好的新数据给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 饼形图定制

(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  function getRandom(start, end, fixed=0) {
    let differ = end - start
    let random = Math.random()
    return (start + differ * random).toFixed(fixed)
  }
  option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      }
    },
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "风险等级饼状图",
        type: "pie",
        center: ["50%", "42%"],
        radius: ["40%", "60%"],
        color: [
          "#06f0ab",
          "#06c8ab",
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
          "#06b4ab",
          "#06dcab",

          //"#d24332"
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: getRandom(2.8,3.0), name: "Protein" },
          { value: getRandom(3.0,3.5), name: "Solid_Milk" },
          { value: getRandom(7.8,8.5), name: "Fat" },
          { value: getRandom(11,13), name: "Acidity" },
          { value: getRandom(0.00,0.05), name: "Arsenic" },
          { value: getRandom(0.0,0.5), name: "Aflatoxir" },
          { value: getRandom(0,0.5), name: "Chromium" },
          { value:getRandom(0,0.5), name: "Lead" },
          { value: getRandom(0,0.5), name: "Mercury" },




        ]

      }
    ]

  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 学习进度柱状图模块
(function () {
  //得到随机数
  function getRandom(start, end, fixed=0) {
    let differ = end - start
    let random = Math.random()
    return (start + differ * random).toFixed(fixed)
  }
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  var data = [getRandom(80,100),getRandom(80,100),getRandom(80,90),getRandom(80,100)];
  var titlename = ["第一季度",
    "第二季度",
    "第三季度",
    "第四季度",
    ];
  //var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];
  option = {
    //图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#fff",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: true,
        inverse: true,
       // data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: "inside",
            formatter: "{c}%"
          }
        }
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barCategoryGap: 50,
        data: [100, 100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 折线图 优秀作品
(function () {
  //得到随机数
  function getRandom(start, end, fixed=0) {
    let differ = end - start
    let random = Math.random()
    return (start + differ * random).toFixed(fixed)
  }
  var forecast=[];
  var truth=[];
  for(var i=0;i<100;i++){
    forecast[i]=Math.ceil(getRandom(0,5));
    truth[i]=Math.ceil(getRandom(0,5));

  }
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b"
        }
      }
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },

        data: [
          "01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",
          "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35","36","37","38","39","40","41","42","43","44","45","46","47",
          "48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73",
          "74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"

        ]
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: "bottom",
        offset: 20
      }
    ],

    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },

        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "流入",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#0184d5",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          }
        },
        data: forecast,
      },
      {
        name: "流出",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          }
        },
        data: truth,
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 点位分布统计模块
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  var option = {
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "42%"],
        roseType: "radius",
        data: [
          { value: 20, name: "西安" },
          { value: 26, name: "北京" },
          { value: 24, name: "上海" },
          { value: 25, name: "其他" },
          { value: 20, name: "武汉" },
          { value: 25, name: "杭州" },
          { value: 30, name: "深圳" },
          { value: 42, name: "广州" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 10,
          // 连接到文字的线长度
          length2: 10
        }
      }
    ]
  };


  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
